<template>
  <u-popup :show="value" @close="close" closeable round="10">
    <view v-if="a" class="store">
      <view class="title">
        <view class="left-icon">
          <image
            src="https://oss.xhoven.com/56e6dffc8ccf1b271a4ea9bc4b8d5e75.png"
            mode="scaleToFill"
          />
        </view>
        <view class="content">关联经销商</view>
        <view class="right-icon">
          <image
            src="https://oss.xhoven.com/56e6dffc8ccf1b271a4ea9bc4b8d5e75.png"
            mode="scaleToFill"
          />
        </view>
      </view>
      <view class="line">
        <view class="label">经销商</view>
        <view class="input">
          <Dropdown ref="Dropdown" v-model="form.r_id" :disable="disable" />
        </view>
      </view>
      <view class="line">
        <view class="label tips">授权书</view>
        <view class="content" style="display: flex;"
          >(<i class="download">下载授权书</i>填写后加盖公章上传)</view
        >
      </view>
      <view class="picList">
        <view class="pic-i" v-for="(v, i) in picList.tempFilePaths" :key="i"
          ><image :src="v" mode="scaleToFill" class="w-100b h-100b" />
          <image
            v-if="mode == '关联经销商'"
            class="delete"
            src="https://oss.xhoven.com/4afdbd7b23eeb1641599baf916fcb801.png"
            mode="scaleToFill"
            @click="deleteEvent(i)"
          />
        </view>
        <view
          class="pic-ia"
          @click="addpic"
          v-if="picList.tempFilePaths.length !== 9"
        >
          <image
            src="https://oss.xhoven.com/1bbdbe43118393c423101b62b8358c9c.png"
            mode="scaleToFill"
        /></view>
      </view>
      <view class="btn">
        <view class="unbind" @click="unbindEvent">解绑经销商</view>
        <view class="enter" @click="submitEvent(false)">{{ mode }}</view>
      </view>
    </view>
    <view v-else class="unbindBox">
      <view class="content"
        >您将要解绑经销商，解绑后该门店不能继续参与经销商
        发起的活动，包括正在进行中的活动*</view
      >
      <view class="tips"
        >请输入手机尾号<i class="tail">{{ tail }}</i
        >的验证码<i class="send" @click="sendB">{{
          !countDown ? '点击重发' : countDown + 's'
        }}</i></view
      >
      <view class="codeBtn">
        <view class="btn" @click="sendCode" v-if="!once">发送验证码</view>
        <view class="input" v-else>
          <u-code-input
            v-model="code"
            :maxlength="6"
            hairline
            mode="line"
          ></u-code-input
        ></view>
      </view>
      <view class="unbindBtn">
        <view class="unbindBtn-item" @click="unbindEventA">解绑经销商</view>
      </view>
    </view>
    <u-code
      unique-key="page-c"
      :seconds="seconds"
      @end="end"
      @start="start"
      ref="uCode"
      @change="codeChange"
      :keepRunning="true"
    ></u-code>
    <u-popup
      :show="auditShow"
      @close="auditShow = false"
      round="10"
      mode="center"
      closeable
    >
      <view class="audit">
        <view class="pic">
          <image
            src="https://oss.xhoven.com/25de541290d70475f3985ac4362195f1.png"
            mode="scaleToFill"
          />
        </view>
        <view class="content"
          >关联经销商完成，等待审核 <br />预计1-2个工作日内完成审核！</view
        >
        <view class="countdown">{{ countdownA }}秒后自动退出>>></view>
      </view>
    </u-popup>
    <u-popup
      :show="unbindShow"
      @close="unbindShow = false"
      round="10"
      mode="center"
      closeable
    >
      <view class="audit">
        <view class="pic">
          <image
            src="https://oss.xhoven.com/13a768e9242f0c483a765766d2b9273b.png"
            mode="scaleToFill"
          />
        </view>
        <view class="content">经销商解绑完成</view>
        <view class="countdown">{{ countdownA }}秒后自动退出>>></view>
      </view>
    </u-popup>
  </u-popup>
</template>

<script>
import Dropdown from '../components/dropdown/dropdownByenterA.vue'
export default {
  components: {
    Dropdown
  },
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      form: {
        type: 4,
        r_id: ''
      },
      picList: { tempFilePaths: [], tempFiles: [] },
      images: [],
      auditShow: false,
      unbindShow: false,
      countdownA: 3,
      mode: '',
      disable: '',
      a: true,
      countDown: '',
      seconds: 60,
      code: '',
      tail: '',
      mobile: '',
      once: false
    }
  },
  methods: {
    close () {
      this.$refs.Dropdown && this.$refs.Dropdown.close()
      this.form = {}
      this.images = ''
      this.a = true
      this.code = ''
      this.once = false
      this.picList = { tempFilePaths: [], tempFiles: [] }
      this.$emit('input', false)
    },
    setMobile (v) {
      this.mobile = v
      this.tail = v.substring(7)
    },
    async sendCode () {
      this.once = true
      await this.$api.common.sendCode({
        code_type: 5,
        mobile: this.mobile
      })
      this.$refs.uCode.start()
    },
    async sendB () {
      await this.$api.common.sendCode({
        code_type: 5,
        mobile: this.mobile
      })
      this.$refs.uCode.start()
    },
    async unbindEventA () {
      try {
        const res = await this.$api.my.Remove({
          code: this.code,
          type: 2
        })
        this.unbindShow = true
        const timeid = setInterval(() => {
          this.countdownA--
        }, 1000)
        setTimeout(() => {
          clearInterval(timeid)
          this.countdownA = 3
          this.unbindShow = false
          this.close()
        }, 3000)
      } catch (error) {
        uni.$u.toast(error.msg)
      }
    },
    codeChange (v) {
      this.countDown = isNaN(+v.split('秒')[0]) ? 0 : +v.split('秒')[0]
    },
    start () {
      console.log('倒计时开始')
    },
    end () {
      this.getCodeA = this.$refs.uCode.canGetCode
      console.log('倒计时结束')
    },
    async getDetail () {
      uni.showLoading()
      const res = await this.$api.my.joinStatus(5)
      const detail = res.data.filter(v => v.type == 5)[0]
      if (!detail) {
        this.mode = '关联经销商'
        this.disable = false
      } else {
        if (detail.review == '未审核') {
          this.mode = '未审核'
          this.disable = true
        } else if (detail.review == '审核通过') {
          this.mode = '审核通过'
          this.disable = true
        }
        this.$refs.Dropdown.setValue(detail.name)
        this.picList.tempFilePaths = detail.extra
        detail.extra &&
          detail.extra.forEach(v => {
            this.picList.tempFiles.push('abcdefg')
          })
      }
      uni.hideLoading()
    },
    deleteEvent (i) {
      if (this.mode == 1) return
      this.picList.tempFilePaths.splice(i, 1)
      this.picList.tempFiles.splice(i, 1)
    },
    addpic () {
      if (this.mode !== '关联经销商') return
      uni.chooseImage({
        success: v => {
          if ([...this.picList.tempFilePaths, ...v.tempFilePaths].length > 9) {
            uni.showToast({
              title: '最大支持9张照片!',
              icon: 'fail',
              mask: true
            })
          }
          this.picList.tempFilePaths = [
            ...this.picList.tempFilePaths,
            ...v.tempFilePaths
          ]
          this.picList.tempFiles = [...this.picList.tempFiles, ...v.tempFiles]
          this.picList.tempFilePaths.splice(9)
          this.picList.tempFiles.splice(9)
        }
      })
    },
    unbindEvent () {
      if (this.mode == '关联经销商') {
        uni.$u.toast('您暂未关联经销商!')
        return
      }
      this.a = false
    },
    async submitEvent (bol) {
      if (this.mode !== '关联经销商') return
      if (!this.form.r_id) {
        uni.$u.toast('请选择经销商')
        return
      }
      if (!bol) {
        uni.showLoading({
          title: '发布中',
          mask: true
        })
        // this.images = []
        this.picList.tempFiles.forEach(async (v, i) => {
          if (v !== 'abcdefg') {
            const res = await this.$api.common.upload({
              file: this.picList.tempFiles[i],
              filePath: this.picList.tempFilePaths[i],
              header: {
                Authorization: `Bearer ${uni.getStorageSync('token')}`
              }
            })
            this.images.push(res.data.url)
          } else {
            this.images.push(this.picList.tempFilePaths[i])
          }
        })
      }
      if (this.images.length == this.picList.tempFiles.length) {
        try {
          const res = await this.$api.my.join({
            ...this.form,
            extra: this.images
          })
          this.auditShow = true
          const timeid = setInterval(() => {
            this.countdownA--
          }, 1000)
          setTimeout(() => {
            clearInterval(timeid)
            this.countdownA = 3
            this.auditShow = false
            this.close()
          }, 3000)
        } catch (error) {
          uni.$u.toast(error.msg)
        }
        uni.hideLoading()
      } else {
        setTimeout(() => {
          this.submitEvent(true)
        }, 500)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.store {
  min-height: 775rpx;
  padding: 0 30rpx;
  padding-bottom: 20rpx;
  .title {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 50rpx;
    margin-top: 60rpx;
    .left-icon {
      width: 30rpx;
      height: 30rpx;
    }
    .content {
      color: #333333;
      font-weight: 600;
      font-size: 34rpx;
      margin: 0 13rpx;
      letter-spacing: 4rpx;
    }
    .right-icon {
      width: 30rpx;
      height: 30rpx;
      transform: rotateY(180deg);
    }
  }
  .line {
    display: flex;
    align-items: center;
    margin-bottom: 45rpx;
    .label {
      font-size: 30rpx;
      font-weight: 600;
      width: 170rpx;

      &::after {
        content: '*';
        color: #ff5757;
        margin-left: 15rpx;
      }
    }
    .content {
      font-size: 28rpx;
      color: #666666;
    }
    .tips {
      position: relative;
      &::before {
        content: '提示：单张图片上传不超过5M';
        color: #ff5757;
        position: absolute;
        width: 300rpx;
        font-size: 20rpx;
        top: 40rpx;
        font-weight: 400;
        left: 0;
      }
    }
  }
  .picList {
    display: flex;
    flex-wrap: wrap;
    .pic-i {
      width: 31.33%;
      height: 218rpx;
      margin-right: 20rpx;
      margin-bottom: 20rpx;
      border-radius: 10rpx;
      overflow: hidden;
      position: relative;
      .delete {
        position: absolute;
        top: 10rpx;
        right: 10rpx;
        width: 30rpx !important;
        height: 30rpx !important;
      }
      &:nth-child(3n) {
        margin: 0;
      }
    }
    .pic-ia {
      margin-bottom: 20rpx;
      width: 31.33%;
      height: 218rpx;
      border-radius: 10rpx;
      overflow: hidden;
      background-color: #f4f1f2;
      position: relative;
      image {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 108rpx !important;
        height: 108rpx !important;
        transform: translate(-50%, -50%);
      }
    }
  }

  .btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 50rpx;
    .unbind {
      width: 336rpx;
      height: 88rpx;
      border: 1px solid #3e73fe;
      color: #3e73fe;
      border-radius: 88rpx;
      text-align: center;
      line-height: 88rpx;
    }
    .enter {
      width: 336rpx;
      height: 88rpx;
      color: #fff;
      border-radius: 88rpx;
      background-color: #3e73fe;
      text-align: center;
      line-height: 88rpx;
    }
  }
}
.audit {
  min-width: 540rpx;
  min-height: 508rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  .pic {
    width: 184rpx;
    height: 184rpx;
    margin-top: 90rpx;
    margin-bottom: 60rpx;
  }
  .content {
    margin-bottom: 40rpx;
    text-align: center;
    font-size: 24rpx;
    line-height: 36rpx;
    letter-spacing: 2rpx;
    font-weight: 600;
  }
  .countdown {
    font-size: 24rpx;
    color: #ff5757;
  }
}
.unbindBox {
  min-height: 570rpx;
  padding: 30rpx;
  display: flex;
  flex-direction: column;
  .content {
    font-size: 30rpx;
    letter-spacing: 2rpx;
    margin-top: 45rpx;
    line-height: 50rpx;
  }
  .tips {
    display: flex;
    font-size: 24rpx;
    color: #999;
    letter-spacing: 2rpx;
    margin-top: 10rpx;
    .tail {
      color: #ff5757;
    }
    .send {
      color: #3e73fe;
    }
  }
  .codeBtn {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 65rpx;
    .btn {
      background-color: #fff;
      color: #000;
      border: 1px solid #000;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 570rpx;
      height: 88rpx;
      border-radius: 88rpx;
    }
    .input {
    }
  }
  .unbindBtn {
    margin-top: 75rpx;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .unbindBtn-item {
      background-color: #ff5757;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 570rpx;
      height: 88rpx;
      border-radius: 88rpx;
    }
  }
}
</style>
